<template>
  <div id="quality-view">
    <dv-full-screen-container>
      <top-header />
      <dv-border-box-1 class="main-content">
        <div class="first-floor">
          <first-content />
          <first-right-content />
        </div>

        <div class="third-floor">
          <third-left-chart/>
          <third-left-two-chart/>
          <third-left-three-chart/>
          <third-right-chart/>

        </div>
      </dv-border-box-1>
    </dv-full-screen-container>
  </div>
</template>

<script>
import topHeader from "./quality/topHeader.vue";
import thirdLeftChart from "./quality/thirdLeftChart.vue";
import firstContent from "./quality/firstContents.vue";
import FirstRightContent from "./quality/firstRightContent.vue";
import ThirdRightChart from './quality/thirdRightChart.vue';
import thirdLeftTwoChart from './quality/thirdLeftTwoChart.vue';
import thirdLeftThreeChart from './quality/thirdLeftThreeChart.vue';

export default {
  name: "QualityView",
  components: {
    topHeader,
    thirdLeftChart,
    firstContent,
    FirstRightContent,
    ThirdRightChart,
    thirdLeftTwoChart,
    thirdLeftThreeChart
  },
};
</script>

<style lang="less">
//三段式设计
#quality-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("./img/Screen062301.jpg");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }
  .main-content {
    position: absolute;
    top: 6%;
    height: 94%;
    flex-direction: row;
    flex: 1;
    display: flex;
  }
  .first-floor {
    position: relative;
    flex: 1;
    display: flex;
    height: 70%;
    box-sizing: border-box;
    flex-direction: row;
    margin: 10px;
  }
  .third-floor {
    position: relative;
    flex: 1;
    display: flex;
    height: 25%;
    box-sizing: border-box;
    flex-direction: row;
    margin: 20px;
  }
}
</style>
